<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'intersectionObserver'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section message">
			<onekit-text v-if="appear">小球出现</onekit-text>
			<onekit-text v-else>小球消失</onekit-text>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-scroll-view onekit-class="scroll-view" scroll-y>
				<onekit-view onekit-class="scroll-area" :onekit-style="`${appear?'background: #ccc':''}`">
					<onekit-text onekit-class="notice">向下滚动让小球出现</onekit-text>
					<onekit-view onekit-class="filling"></onekit-view>
					<onekit-view onekit-class="ball"></onekit-view>
				</onekit-view>
			</onekit-scroll-view>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "WXML节点布局相交状态",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["appear"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'WXML节点布局相交状态',
        "path":'packageAPI/pages/intersection-observer/intersection-observer'
};
    },
    "data":{
        "appear":false
},
    "onLoad"(){
      this._observer = wx.createIntersectionObserver(this);
      this._observer.relativeTo('.scroll-view').observe('.ball',(res)=>{
      console.log(res);
      this.setData({
          "appear":res.intersectionRatio > 0
});
    });
    },
    "onUnload"(){
      if(this._observer)
      this._observer.disconnect();
    }
});

</script>
<style 
 lang="css">
.scroll-view {
  height: 200px ;
  background: var(--weui-BG-2) ;
}
.scroll-area {
  height: 1150px ;
  display: flex ;
  flex-direction: column ;
  align-items: center ;
  transition: .5s ;
}
.notice {
  margin-top: 75px ;
}
.ball {
  width: 100px ;
  height: 100px ;
  background: #1AAD19 ;
  border-radius: 50% ;
}
.filling {
  height: 200px ;
}
.message {
  width: 100% ;
  display: flex ;
  justify-content: center ;
}
.message .onekit-text {
  font-size: 20px ;
  font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif ;
}
</style>